<template lang="pug">
    div(class="forum-cube",@click.stop)
        div(class="forum-cube__row")
            div(class="forum-cube__row_item", v-for="item in row1", :key="item.id")
                img(v-lazy="item.url+`?width=100&format=png`", 
                    :large="item.url",
                    :preview="preview",
                    @click="imageClick(item)")
        div(class="forum-cube__row")
            div(class="forum-cube__row_item",v-for="item in row2")
                img(v-lazy="item.url+`?width=100&format=png`", 
                    :large="`${item.url}?width=${wrapperWidth}`",
                    :preview="preview",
                    @click="imageClick(item)")
        div(class="forum-cube__row")
            div(class="forum-cube__row_item",v-for="item in row3")
                img(v-lazy="item.url+`?width=100&format=png`", 
                    :large="item.url",
                    :preview="preview",
                    @click="imageClick(item)")
</template>

<script>
    /**
     * 九宫格
     */
    import preview from 'vue-photo-preview'
    import 'vue-photo-preview/dist/skin.css'

    Vue.use(preview, {fullscreenEl: false})

    import Vue from 'vue'
    import VueLazyLoad from 'vue-lazyload'
    Vue.use(VueLazyLoad,{
        lazyComponent: true,
        error: '../aseets/images/img-break.jpeg',
        loading: '../aseets/images/img-loading.jpeg',
    })

    export default {
        name: 'cube-images',
        data() {
            return {
                display: false,
                preview: Math.round(Math.random(1, 100000) * 100000) * Math.round(Math.random(1, 100000) * 100000),
                wrapperWidth: 0,
            }
        },
        props: {
            images: {
                type: Array, default: () => {
                    return [{url: 'not url'}]
                }
            },
        },
        computed: {
            row1() {
                if (!this.images) return []
                const len = this.images.length
                if (len >= 9) return this.images.slice(0, 3)
                if (len == 4) return this.images.slice(0, 2)
                if (len <= 2) return this.images.slice(0, len)
                return this.images.slice(0, 3)
            },
            row2() {
                if (!this.images) return []
                const len = this.images.length
                if (len < 3) return []

                if (len == 4) return this.images.slice(2, 4)
                if (len >= 6) return this.images.slice(3, 6)
                if (len < 6 && len > 3) return this.images.slice(3, len)
            },
            row3() {
                if (!this.images) return []
                const len = this.images.length
                if (len <= 6) return []

                return this.images.slice(6, len)
            },
            image_width(){
                return this.wrapperWidth / 3;
            }
        },
        methods: {
            imageClick(item) {
                this.display = true;
            },
            bindEvent(el) {
                const vm = this;
                el.currentTarget.onclick = () => {
                    vm.imageClick(item)
                }
            }
        },
        mounted() {
            this.wrapperWidth = this.$el.offsetWidth;
        }
    }
</script>

<style lang="less">
    .forum-cube {
        &__row {
            overflow: hidden;
            width: 100vw;
            margin-bottom: 0.33vw;

            &_item {
                // flex: 1;
                float: left;
                width: 33vw;
                height: 33vw;
                margin-right: 0.33vw;

                img {
                    min-width: 33vw;
                    min-height: 33vw;
                }
            }
        }

        img {
            width: 30vw;
        }
    }
</style>
